<template>
  <el-dialog :model-value="value" width="700px" title="添加楼层" @close="handleClose" :fullscreen="device === 'mobile'">
    <el-form :model="form" ref="floorRef" label-width="80px">
      <el-form-item label="选择公寓" prop="buildingId" required>
        <el-select v-model="form.buildingId" @change="buildingIdChange">
          <el-option :label="item.name" :value="item.buildingId" v-for="item in buildingList" :key="item.buildingId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在楼层" prop="floor" required>
        <el-select v-model="form.floor" @change="floorChange">
          <el-option
            v-for="item in floorOptions"
            :label="item + '层'"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间数" prop="room" required>
        <el-select v-model="form.room" @change="roomChange">
          <el-option
            v-for="item in 99"
            :label="item"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间号">
        <div style="overflow: hidden;word-wrap: break-word;">{{form.chamberNameList}}</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="AddFloor">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  value: {
    type: Boolean,
    default: false
  },
  buildingList: {
    type: Array,
    default: () => []
  }
})
const defaultOptions = Array(99).fill(1).map((item, index) => index + 1)
const floorOptions = ref([])
const floorList = ref([1, 2, 3, 6, 7])
const device = computed(() => useAppStore().device)
// 监听弹窗显示
watch(() => props.value, (visible) => {
  // 打开弹窗时清空表单
  if (visible) {
      reset()
    }
})

const data = reactive({
  form: {
    buildingId: undefined,
    floor: undefined,
    room: 1,
    chamberNameList: ''
  }
})
const { form } = toRefs(data)


function reset() {
  form.value = {
    buildingId: undefined,
    floor: undefined,
    room: 1,
    chamberNameList: ''
  }
  proxy.resetForm('floorRef')
}

// 所选公寓发生变化
function buildingIdChange(value) {
  console.log(value);
  const findIndex = props.buildingList.findIndex(item => item.buildingId === value)
  floorList.value = findIndex !== -1 ? props.buildingList[findIndex].floorList.map(item => Number(item.floorName)) : []
  console.log("floorList", floorList.value);
  // 给下拉框选项重组数据
  floorOptions.value = [...defaultOptions]
  floorList.value.forEach(item => {
    // 剔除已有的楼层
    let index = floorOptions.value.findIndex(val => val === item)
    if (index !== -1) {
      floorOptions.value.splice(index, 1)
    }
  })
  // 给楼层下拉框赋值
  form.value.floor = floorOptions.value[0]
  form.value.chamberNameList = Array(form.value.room).fill(1)
    .map((item, index) => `${form.value.floor}${index < 9 ? '0' : ''}${index + 1}`).join(',')
}

// 所选楼层发生变化
function floorChange() {
  form.value.chamberNameList = Array(form.value.room).fill(1)
    .map((item, index) => `${form.value.floor}${index < 9 ? '0' : ''}${index + 1}`).join(',')
}

// 房间数发生变化
function roomChange() {
  form.value.chamberNameList = Array(form.value.room).fill(1)
    .map((item, index) => `${form.value.floor}${index < 9 ? '0' : ''}${index + 1}`).join(',')
}

function handleOk() {
  proxy.$refs['floorRef'].validate(valid => {
    if (valid) {
      // console.log(form);
      emit('ok', form.value)
    }
  })
}
function handleClose() {
  emit('cancel')
}
</script>
